<template>
	<uni-popup ref="popup" type="bottom" :class="showStr" :safe-area="false" @maskClick="cancel">
		<view>
			<view class="content">
				<view>
					<view class="item">
						<view>
							<view>
								<image class="tip" src="/static/tip.png" />
							</view>
							<view class="title">
								<view>申请使用</view>
							</view>
							<view @click="closeEvent">
								<image class="close" src="/static/close.svg" />
							</view>
						</view>
					</view>
					<button class="choose" open-type="chooseAvatar" @chooseavatar="logoEvent" plain="true">
						<view class="item">
							<view>
								<view>
									<image class="avatr" :src="logo" />
								</view>
								<view class="tx">
									点击设置头像
								</view>
								<view>
									<image class="arrow" src="/static/icon/right_arrow_plus.svg" />
								</view>
							</view>
						</view>
					</button>
					<view class="line"></view>
					<view class="item">
						<view>
							<view>
								<text>昵称</text>
							</view>
							<view class="nick">
								<input type="nickname" @change="changeNick" class="weui-input" placeholder="请输入昵称" />
							</view>
							<view></view>
						</view>
					</view>

					<view class="line"></view>
					<button class="choose" open-type="getPhoneNumber" @getphonenumber="phoneEvent" plain="true">
						<view class="item phone">
							<view>
								<view>
									<text>手机号</text>
								</view>
								<view class="txt">
									{{ parsePhone(phone) }}
								</view>
								<view class="sq">
									<view>
										<view>微信授权</view>
									</view>
								</view>
							</view>
						</view>
					</button>
					<view class="line"></view>
					<view class="usercode">
						<text>账号</text>
						<input type="text" v-model="usercode" placeholder="请输入账号" />
					</view>
					<view class="line"></view>
					<view class="usercode">
						<text>姓名</text>
						<input type="text" v-model="username" placeholder="请输入姓名" />
					</view>
					<view class="line"></view>
					<!-- <view class="item info">
						<view>
							<view>
								<checkbox @click="toogleAgree()" />
							</view>
							<view class="txt" @click="lookContract">
								请同意
								<text>《用户协议》</text>
								点击查看
							</view>
							<view @click="lookContract"></view>
						</view>
					</view> -->
					<view class="btn">
						<button @click="okEvent">{{ btnData }}</button>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import helper from "@/utils/helper";
	import {
		weixinApi,
		userApi
	} from "@/utils/api";
	export default {
		props: {
			title: {
				type: String,
				default: "消息"
			},
			show: {
				type: Boolean,
				default: false
			},
			tabBar: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				normalLogo: helper.defaultLogo,
				btnData: "注册账户",
				showStr: this.show ? "show" : "hide",
				titleData: this.title,
				nickName: "",
				logo: helper.defaultLogo,
				phone: "",
				usercode: "",
				username:"",
				look: false,
				contract: "",
			};
		},
		beforeMount() {
			this.titleData = this.title;
		},
		watch: {
			title: {
				handler(val) {
					this.titleData = val;
				},
				deep: true,
				immedaite: true,
			},
			show: {
				handler(val) {
					if (val) {
						uni.hideTabBar();
						this.$refs.popup.open();
					} else {
						try {
							uni.showTabBar();
							this.$refs.popup.close();
						} catch {}
					}
					this.setShow(val);
				},
				deep: true,
				immedaite: true,
			},
		},
		methods: {
			logoEvent(e) {
				if (e.detail.avatarUrl) {
					this.logo = e.detail.avatarUrl;
				}
			},
			async toogleAgree() {
				if (this.contract == "") {
					let data = await customerApi.contract(0);
					this.contract = data;
				}
				

				this.look = !this.look;
			},
			async phoneEvent(e) {
				let code = e.detail.code;
				if (code != undefined) {
					var res = await helper.getphone(code);
					this.phone = res.mobile
					this.usercode = res.userName
					this.username=res.realName
				}
			},
			parsePhone(tel) {
				if (tel == "") return tel;
				return tel.substr(0, 3) + "****" + tel.substr(tel.length - 4, 4);
			},
			async lookContract() {
				let data = await customerApi.contract(0);
				helper.openFile2(data);
				this.contract = data;
			},
			async okEvent(e) {
				
				let code = e.detail.code;
				if (this.logo == this.normalLogo) {
					helper.toast("请更换头像");
					return;
				} else if (this.nickName == "") {
					helper.toast("请输入昵称");
					return;
				} else if (this.phone == "") {
					helper.toast("未授权手机号注册。");
					return;
				} else if (this.usercode == "") {
					helper.toast("请输入账号");
					return;
				}else if (this.username == "") {
					helper.toast("请输入姓名");
					return;
				}
				
				
				let openId = await helper.getOpenId();
				let icon = await helper.url2Base64(this.logo);
				
				var res=await userApi.register({
					avatar: icon,
					openId: openId,
					mobile: this.phone,
					weixinName: this.nickName,
					realName:this.username,
					userCode: this.usercode,
					// contract: this.contract,
				});
				
				let result = await weixinApi.token({
					openId: openId,
					mobile: this.phone,
				});
				if (result == true) {
					this.$emit("ok");
				}
			},
			closeEvent() {
				this.$emit("cancel");
			},
			setShow(val) {
				this.showStr = val ? "show" : "hide";
			},
			changeNick(e) {
				this.nickName = e.detail.value;
				this.warn = "";
			},
			cancel() {
				this.$emit("cancel");
			},
		},
	};
</script>

<style scoped lang="scss">
	@mixin main() {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background: rgba(0, 0, 0, 0.4);
	}
	.usercode{
		display: flex;
		text{
			margin-right: 20rpx;
		}
	}

	.content {
		background-color: #fff;
		width: 100%;
		padding-bottom: 180rpx;
		position: relative;

		>view {
			padding: 20rpx;
		}

		.item {
			min-height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: left;

			>view {
				display: flex;
				width: 100%;

				>view:nth-child(2) {
					flex-grow: 1;
				}

				>view:first-child,
				>view:last-child {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				margin-top: 10rpx;
			}
		}

		.title {
			>view {
				padding-left: 20rpx;
				border-left: 1px solid #d8d8d8;
				text-align: left;
				line-height: 58rpx;
				font-size: 16px;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1f1f1f;
				letter-spacing: 0.8px;
			}
		}

		.line {
			margin: 20rpx 0rpx;
			border-bottom: 1px solid #e8e8e8;
		}

		.choose {
			padding: 0 !important;
			margin: 0 !important;
		}

		.tx {
			font-size: 14px;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: right;
			color: #a2a2a2;
			line-height: 96rpx;
			letter-spacing: 0.7px;
		}

		image.tip {
			width: 144rpx;
			height: 58rpx;
			margin: 0 20rpx;
		}

		image.close {
			width: 56rpx;
			height: 56rpx;
		}

		image.avatr {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

		image.arrow {
			width: 48rpx;
			height: 48rpx;
		}

		.nick {
			margin-left: 10rpx;

			input {
				width: 100%;
			}
		}

		.phone {
			>view {
				>view:first-child {
					font-size: 16px;
					font-family: PingFangSC, PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					color: #1f1f1f;
					line-height: 22px;
					letter-spacing: 0.8px;
				}
			}

			.txt {
				margin-left: 20rpx;
				font-size: 16px;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1f1f1f;
				letter-spacing: 0.8px;
			}

			.sq {
				background: #00d400;
				border-radius: 8rpx;
				font-size: 14px;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: right;
				color: #ffffff;
				line-height: 20px;
				letter-spacing: 0.7px;

				>view {
					margin: 10rpx 20rpx;
				}
			}
		}

		.info {
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.txt {
				margin: 20rpx;
				font-size: 14px;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 20px;
				letter-spacing: 0.7px;
				display: flex;

				text {
					color: blue;
				}
			}
		}
	}

	.hide {
		@include main();
		display: none;
	}

	.show {
		@include main();
		display: flex;
	}

	.btn {
		margin-top: 54rpx;
		button {
			width: 702rpx;
			height: 86rpx;
			background: #252F62;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFangSC-Semibold;
			font-weight: 600;
			text-align: center;
			color: #ffffff;
			letter-spacing: 0.8px;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				display: block;
			}
		}
	}

	button[plain] {
		border: 0;
	}
</style>